<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">
    
    <ui:define name="head">
        <style type="text/css">
            .ui-tree {
                width: 300px;
            }
        </style>
    </ui:define>

	<ui:define name="content">
		<h1 class="title ui-widget-header ui-corner-all">Tree - Listeners</h1>
		<div class="entry">
			<p>Tree provides flexible callbacks for expand, collapse and selection events.</p>

			<h:form id="form">

                <p:growl id="messages" showDetail="true" />

				<p:tree value="#{treeBean.root}" var="node" dynamic="true" cache="false"
						selectionMode="single"  selection="#{treeBean.selectedNode}" id="tree">
                        
                    <p:ajax event="expand" update=":form:messages" listener="#{treeBean.onNodeExpand}" />
                    <p:ajax event="collapse" update=":form:messages" listener="#{treeBean.onNodeCollapse}" />
                    <p:ajax event="select" update=":form:messages" listener="#{treeBean.onNodeSelect}" />
                    <p:ajax event="unselect" update=":form:messages" listener="#{treeBean.onNodeUnselect}" />

					<p:treeNode>
						<h:outputText value="#{node}" />
					</p:treeNode>
				</p:tree>

			</h:form>

		<h3>Source</h3>
			<p:tabView>
				<p:tab title="treeEvents.xhtml">
					<pre name="code" class="xml">
&lt;h:form id="form"&gt;

    &lt;p:growl id="messages" showDetail="true" /&gt;

    &lt;p:tree value="\#{treeBean.root}" var="node" dynamic="true" cache="false"
            selectionMode="single"  selection="\#{treeBean.selectedNode}" id="tree"&gt;

        &lt;p:ajax event="expand" update=":form:messages" listener="\#{treeBean.onNodeExpand}" /&gt;
        &lt;p:ajax event="collapse" update=":form:messages" listener="\#{treeBean.onNodeCollapse}" /&gt;
        &lt;p:ajax event="select" update=":form:messages" listener="\#{treeBean.onNodeSelect}" /&gt;
        &lt;p:ajax event="unselect" update=":form:messages" listener="\#{treeBean.onNodeUnselect}" /&gt;

        &lt;p:treeNode&gt;
            &lt;h:outputText value="\#{node}" /&gt;
        &lt;/p:treeNode&gt;
    &lt;/p:tree&gt;

&lt;/h:form&gt;

					</pre>
				</p:tab>

				<p:tab title="TreeBean.java">
					<pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;

import org.primefaces.event.NodeCollapseEvent;
import org.primefaces.event.NodeExpandEvent;
import org.primefaces.event.NodeSelectEvent;
import org.primefaces.event.NodeUnselectEvent;
import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

public class TreeBean implements Serializable {

	private TreeNode root;

	private TreeNode selectedNode;

	public TreeBean() {
		root = new DefaultTreeNode("Root", null);
		TreeNode node0 = new DefaultTreeNode("Node 0", root);
		TreeNode node1 = new DefaultTreeNode("Node 1", root);
		TreeNode node2 = new DefaultTreeNode("Node 2", root);

		TreeNode node00 = new DefaultTreeNode("Node 0.0", node0);
		TreeNode node01 = new DefaultTreeNode("Node 0.1", node0);

		TreeNode node10 = new DefaultTreeNode("Node 1.0", node1);
		TreeNode node11 = new DefaultTreeNode("Node 1.1", node1);

		TreeNode node000 = new DefaultTreeNode("Node 0.0.0", node00);
		TreeNode node001 = new DefaultTreeNode("Node 0.0.1", node00);
		TreeNode node010 = new DefaultTreeNode("Node 0.1.0", node01);

		TreeNode node100 = new DefaultTreeNode("Node 1.0.0", node10);
	}

	public TreeNode getRoot() {
		return root;
	}

	public TreeNode getSelectedNode() {
		return selectedNode;
	}

	public void setSelectedNode(TreeNode selectedNode) {
		this.selectedNode = selectedNode;
	}

	public void onNodeExpand(NodeExpandEvent event) {
		FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Expanded", event.getTreeNode().toString());

		FacesContext.getCurrentInstance().addMessage(null, message);
	}

	public void onNodeCollapse(NodeCollapseEvent event) {
		FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Collapsed", event.getTreeNode().toString());

		FacesContext.getCurrentInstance().addMessage(null, message);
	}

	public void onNodeSelect(NodeSelectEvent event) {
		FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Selected", event.getTreeNode().toString());

		FacesContext.getCurrentInstance().addMessage(null, message);
	}

    public void onNodeUnselect(NodeUnselectEvent event) {
		FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Unselected", event.getTreeNode().toString());

		FacesContext.getCurrentInstance().addMessage(null, message);
	}
}
					</pre>
				</p:tab>
			</p:tabView>
            </div>
	</ui:define>
</ui:composition>